<template>
	<el-table :loading="configure?.loading" ref="basicTableRef" height="100%" size="small"
		:row-key="configure?.treeProps?.rowKey || 'id'" :load="configure?.treeProps?.load" :default-expand-all="false"
		:lazy="configure?.treeProps?.lazy" :tree-props="{
			children: configure?.treeProps?.children,
			hasChildren: configure?.treeProps?.hasChildren,
		}" :data="dataList" class="htf-table" border :cell-style="{ 'text-align': 'left' }"
		:header-cell-style="{ 'text-align': 'left', background: '#f7f7fa', color: '#303133', 'font-size': '12px' }">
		<el-table-column v-if="configure?.index && configure.paginator" type="index" width="55" label="序号">
			<template #default="scope">
				{{
					scope.$index +
					configure.paginator.pageSize * (configure.paginator.page - 1) +
					1
				}}
			</template>
		</el-table-column>
		<el-table-column v-if="configure?.selection" type="selection" width="55"></el-table-column>

		<el-table-column v-for="(e, i) in configure?.columns" show-overflow-tooltip :prop="e.key" :width="e.width" :key="i"
			:fixed="e.fixed" :label="e.name">
			<template #default="scope">
				<component :dict="e.dict" :type="e.type" :format="e.format" :row="scope.row" :rawkey="e.key" :value="e.filter
					? e.filter(
						scope.row[e.key],
						scope.row,
						scope.$index,
						configure?.source || []
					)
					: scope.row[e.key]
					" :is="e.component || 'TableText'" @click.stop="onClickTableItme(e, scope.$index, scope.row)"></component>
			</template>
		</el-table-column>

		<el-table-column label="操作" v-if="configure?.opers && configure.opers.length"
			:fixed="configure.operateFixed == undefined ? 'right' : configure.operateFixed"
			:width="configure?.operateWidth">
			<template #default="scope">
				<template v-for="(item, index) in configure.opers" :key="index">
					<span :class="ns.b('operate')" v-if="!checkShowOperate(item, scope.row)">
						<component @click.stop="onClickComponent(item, scope.row, index)" :type="item.type"
							:is="item.component || 'TableLink'" :icon="item.icon" :value="checkLabel(item, scope.row)"
							:disabled="checkDisabled(item, scope.row)"></component>
					</span>
				</template>
			</template>
		</el-table-column>
		<template #empty>
			<el-empty description="~空空如也~" />
		</template>
	</el-table>
	<el-row class="htf-table-pagination" justify="end" style="margin-top: 12px" v-if="configure?.paginator?.show">
		<!-- <el-pagination prev-text="上一页" next-text="下一页" ref="pageRef" @size-change="handleSizeChange" 
			@current-change="handleCurrentChange" background layout="prev, pager, next, jumper"
			:page-size="pageConfig.pageSize" :page-sizes="[15, 30, 45, 60, 75, 90]" :total="configure?.paginator?.total" /> -->
		<el-config-provider :locale="currentLocale">
			<el-pagination ref="pageRef" @size-change="handleSizeChange" small @current-change="handleCurrentChange"
				background layout="total , sizes, prev, pager, next, jumper" :page-size="pageConfig.pageSize"
				:page-sizes="[10, 20, 50, 100]" :total="configure?.paginator?.total" />
		</el-config-provider>




	</el-row>
</template>
<script lang="ts" scoped>
import { BASE_PAGE_SIZE } from "../config";
import { useNamespace } from "@/hooks";
import { TableInstance } from "element-plus";
import { TableOptions, TableOperateType } from "./type";
import {
	computed,
	defineComponent,
	shallowReactive,
	PropType,
	onMounted,
	shallowRef,
	watchEffect,
	nextTick,
	watch,
	ref,
} from "vue";
import childComps from "@/components/page-box/basic-table-box/comp-type";

// import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import zhCn from "element-plus/es/locale/lang/zh-cn";

export default defineComponent({
	components: { ...childComps },
	props: {
		configure: Object as PropType<TableOptions<any>>,
		init: Function as PropType<(opt: TableInstance) => void>,
	},
	setup(props) {
		const currentLocale = computed(() => zhCn)

		const pageConfig = shallowReactive<Record<"pageSize" | "page", number>>({
			pageSize: BASE_PAGE_SIZE,
			page: 1,
		});
		const dataList = ref(props.configure?.source || []);

		if (props.configure?.changePage) {
			props.configure?.changePage(pageConfig);
		}
		const ns = useNamespace("table");
		// 检测是否禁用
		const checkRoleDisable = () => { };
		// 检测操作栏所有权限
		const operateAllAuth = computed(() => {
			// return props.configure?.operate?.map(e => !checkRoleDisable(e.role)).includes(true)
		});

		// 判断是否禁用
		const checkDisabled = (item: TableOperateType<any>, row: object) => {
			if (typeof item.disabled == "boolean") {
				return item.disabled;
			} else {
				return item.disabled && item.disabled(row);
			}
		};
		// 判断是否显示操作栏
		const checkShowOperate = (item: TableOperateType<any>, row: object) => {
			if (typeof item.show == "boolean") {
				return item.show;
			} else {
				return item.show && item.show(row);
			}
		};
		const checkLabel = (item: TableOperateType<any>, row: object) => {
			if (typeof item.name != "function") {
				return item.name;
			} else {
				return item.name && item.name(row);
			}
		};

		const basicTableRef = shallowRef<TableInstance>();
		const pageRef = shallowRef();

		onMounted(() => {
			props.configure?.selectedRows?.forEach(e =>
				basicTableRef.value?.toggleRowSelection(e, true)
			);
			props.init!(basicTableRef.value as TableInstance);
		});

		const handleSizeChange = (val: number) => {
			pageConfig.pageSize = val;
			pageConfig.page = 1;
			props.configure?.changePage && props.configure?.changePage(pageConfig);
		};
		const handleCurrentChange = (val: number) => {
			pageConfig.page = val;
			props.configure?.changePage && props.configure?.changePage(pageConfig);
		};
		const onClickComponent = (
			item: TableOperateType<any>,
			row: TableOptions<any>["source"],
			index: number
		) => {
			item?.callback && item?.callback(row, index, props.configure?.source || []);
		};
		const onClickTableItme = (item: TableOperateType<any>, i: number, row: any) => {
			item?.callback && item.callback(item, i, row)
		}
		watch(
			() => props.configure?.source,
			opt => {
				dataList.value = [];
				nextTick(() => {
					setTimeout(() => {
						dataList.value = opt || [];
					}, 16);
				});
			}
		);
		watchEffect(() => {
			props.init!(basicTableRef.value as TableInstance);
		});
		return {
			handleCurrentChange,
			handleSizeChange,
			basicTableRef,
			pageRef,
			checkShowOperate,
			checkDisabled,
			checkLabel,
			checkRoleDisable,
			operateAllAuth,
			ns,
			onClickComponent,
			onClickTableItme,
			pageConfig,
			dataList,
			currentLocale
		};
	},
});
</script>

<style lang="scss" scoped>
$ns: table;

@include block($ns) {
	height: 100%;
}

@include block(#{$ns}-operate) {
	margin-right: 10px;

	&:last-child {
		margin-right: 0;
	}
}

:deep(.el-table__inner-wrapper) {
	flex: 1;
}

.hover {
	&:hover {
		box-shadow: 1px 1px 15px 3px #ccc;
	}
}
</style>
